<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on指令</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        margin-bottom: 5px;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .box2 {
        width: 50px;
        height: 50px;
        background-color: red;
      }
      .list {
        width: 100px;
        height: 200px;
        background-color: #ccc;
        overflow: auto;
      }
      .list li {
        width: 100%;
        height: 60px;
      }
    </style>
  </head>

  <body>
    <div id="root">
      <!-- vue中的事件还有很多，详细请看Vue文档 -->
      <input type="button" value="点击v-on" v-on:click="doIt" />
      <input type="button" value="点击v-on简写" @click="doIt" />
      <input type="button" value="双击" @dblclick="doIt" />
      <h2 @click="changeCity">{{ city }}</h2>
      <input type="button" value="点击" @click="doThis('mannoname','fight')" />
      <input type="text" @keyup.enter="enterUp" />
      <!-- 传参 -->
      <input type="button" value="点我显示a" @click="showInf(2,$event)" />

      <!-- prevent 阻止默认事件 -->
      <a href="../vue基础.html" @click.prevent="showInf(3)">阻止默认事件</a>

      <!-- stop 阻止事件冒泡 -->
      <div class="demo" @click="doIt">
        <button @click.stop="doIt">阻止事件冒泡</button>
        <a href="../vue基础.html" @click.prevent.stop="doIt"
          >阻止默认事件以及事件冒泡</a
        >
      </div>

      <!-- once 事件只触发一次  -->
      <button @click.once="doIt">只触发一次</button>

      <!-- capture 事件捕获  -->
      <div class="box1" @click.capture="showInf(1)">
        事件捕获
        <div class="box2" @click="showInf(2)"></div>
      </div>

      <!-- self 只有event.target是当前操作元素时触发事件  -->
      <div class="demo" @click.self="showInf(1)">
        <button @click="showInf(2)">当前操作元素触发</button>
      </div>

      <!-- passive 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
      <ul @wheel.passive="doItnow" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>

      <!-- 键盘事件 -->
      <input type="text" @keydown.space="showInf('按下了空格')" />
      <input type="text" @keyup.ctrl.y="showInf('按下了ctrl和y')" />
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      //事件
      /* 事件的基本使用：
          1.使用 v-on:xxx 或 @xxx 绑定事件，xxx是事件名
          2.事件的回调需要配置在methods对象中，最终会在VM上
          3.methods中配置的函数，不要用箭头函数，否则this就不是VM了
          4.methods中配置的函数，都是Vue所管理的函数，this的指向是VM或组件实例对象
          5.@click='demo' 和 @click='demo($event)' 效果一致，但后者可以传参的同时返回event
          6.绑定事件时 @xxx='yyy' yyy可以写一些简单的语句 */
      /* Vue中的事件修饰符：
          1.prevent 阻止默认事件
          2.stop 阻止事件冒泡
          3.once 事件只触发一次
          4.capture 事件捕获
          5.self 只有event.target是当前操作元素时触发事件
          6.passive 事件的默认行为立即执行，无需等待事件回调执行完毕
          7.修饰符可以连着写，如 @click.prevent.stop */
      /* 键盘事件：
            1.Vue中常用的按键别名：
                回车：enter
                删除：delete
                退出：esc
                空格：space
                换行：tab(需要配合keydown使用)
                上：up
                下：down
                左：left
                右：right
            2.Vue中未提供别名的按键，可以使用按键原始的key值去绑定，但要转为caps-lock（转换大小写）
            3.系统修饰符：ctrl、alt、shift、meta
                1）配合keyup使用：按下修饰符的同时，再按下其他按键，随后释放其他按键，事件才触发
                2）配合keydown使用：正常触发
                3)在这之后可以加别的按键,如 @keyup.ctrl.y 按下ctrl和y触发
            4.用keyCode指定按键（不推荐）
            5.Vue.config.keyCodes.自定义按键名 = 键码 可以定制按键别名（不推荐） */

      //自定义按键别名
      // Vue.config.keyCodes.huiche = 13;

      var vm = new Vue({
        el: "#root",
        data: {
          city: "台州",
        },
        methods: {
          doIt: function () {
            console.log("hello vue");
          },
          doItnow() {
            for (var i = 0; i < 10000; i++) {
              console.log(1);
            }
            console.log(2);
          },
          changeCity: function () {
            console.log(this.city);
            this.city += "到杭州";
          },
          doThis: function (name, status) {
            console.log(name);
            console.log(status);
          },
          enterUp: function () {
            console.log("hello Vue");
          },
          showInf(a, e) {
            console.log(a);
          },
        },
      });
    </script>
  </body>
</html>
